<template>
	<view class="container">

		<view class="header">
			<button type="default" plain class="service-btn" open-type="contact">
				<image src="/static/images/order/order_icon_service.png" />
				<!-- <text>在线客服</text> -->
				<button style="background-color: #eaeaea;" view="title"  class="kefu">在线客服</button>
			</button>
		</view>
		<view class="content" v-if="Object.keys(order).length>0">
			<view class="order-box">
				<image src="/static/images/order/icon_making.png" class="status-icon"/>
				<view class="text-color-primary font-size-lg font-weight-bold mb-10">订单已完成</view>
				<view class="text-color-assist font-size-sm">感谢您对小镜界的支持，欢迎再次光临</view>
			</view>
			<view class="flex-fill overflow-auto">
				<view class="order-info">
					<list-cell padding="50rpx 40rpx" line-right bgcolor="#f6f6f6">
						<view class="w-100 d-flex align-items-center">
							<view class="flex-fill d-flex flex-column overflow-hidden">
								<view class="font-size-lg mb-10">{{ order.ooutTradeNo[0].CoName }}</view>
								<view class="font-size-extra-sm text-color-assist text-truncate">{{ order.ooutTradeNo[0].CoAddr }}</view>
							</view>
							<view class="d-flex align-items-center ml-20">
								<image src="/static/images/order/icon_phone.png" class="phone-icon" @click="freeTell()"></image>
								<image src="/static/images/order/icon_map.png" class="map-icon"  @click="viewShop()"></image>
							</view>
						</view>
					</list-cell>
					<list-cell padding="0 40rpx" line-right bgcolor="#f6f6f6">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mt-40" v-for="(item, index) in order.lx_Self_OrdersSub" :key="index">
								<view class="flex-fill d-flex flex-column">
									<view class="font-size-base mb-10">{{ item.osProName }}</view>
									<view class="font-size-extra-sm text-color-assist">
										{{item.osSpec}}
									<!-- 	{{ materialsText(item.osSpec) }} -->
									</view>
								</view>
								<view class="flex-shrink-0 font-weight-bold ml-40">x{{ item.osNumber }}</view>
								<view class="flex-shrink-0 font-weight-bold ml-40">￥{{ (parseFloat(item.osPrice)+parseFloat(item.osRemark)) }}</view>
							</view>
							<view class="d-flex justify-content-between align-items-center mt-40 pb-30 border-dashed">
								<view>商品总价</view>
								<view>￥{{ (parseFloat(order.oAllPrice)+parseFloat(order.ojgPrice)) }}</view>
							</view>
							<view class="d-flex justify-content-between align-items-center font-size-lg font-weight-bold mt-30 mb-40">
								<view>合计</view>
								<view>￥{{ (parseFloat(order.oAllPrice)+parseFloat(order.ojgPrice)) }}</view>
							</view>
						</view>
					</list-cell>
					<list-cell padding="30rpx 40rpx" last bgcolor="#f6f6f6" style="border-radius: 0 0 30rpx 30rpx;">
						<view class="w-100 d-flex flex-column font-size-extra-sm text-color-assist">
							<view class="mb-10">如需退款，请致电门店</view>
							<view class="mb-10">下单时间：{{ order.createDate }}</view>
							<view class="mb-10">取茶号：{{ order.oCode }}</view>
							<view class="mb-10">订单编号：{{ order.oCode }}</view>
							<view class="mb-10">备注信息：{{ order.oRemark }}</view>
						</view>
					</list-cell>
				</view>
<!-- 				<view class="order-invoice font-size-base d-flex justify-content-between align-items-center">
					<view>订单发票</view>
					<view class="text-color-primary d-flex align-items-center">
						<view>立即开票</view>
						<image src="/static/images/common/common_icon_jump_gold.png" class="jump-icon"></image>
					</view>
				</view> -->
				
				<view class="order-invoice font-size-base d-flex justify-content-between align-items-center">
					<uni-evaluate style="width:100%;" :list-data="evaluateData.list" :rate="evaluateData.rate"/>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import uniEvaluate from '@/components/xiujun-evaluate/uni-evaluate.vue';
	
	
	export default {
		components: {
			listCell,
			uniEvaluate
		},
		data() {
			return {
				evaluateData:{
					list:[],
					rate:5
				},
				order: {}
			}
		},
		computed: {
			materialsText() {
				return materials => {
					let arr = []
					materials.forEach(item => arr.push(item.name))
					return arr.join(',')
				}
			}
		},
		async onLoad(options) {
			let order=JSON.parse(options.order);
			order.oRemark=order.oRemark==null?'':order.oRemark;
			
			this.order=order;

			let pdtids=[];
			this.order.lx_Self_OrdersSub.forEach(e=>{
				if(e.osSpec==null){
					e.osSpec="";
				}
				pdtids.push(e.osProId);
			});
			//this.getEvalueData(pdtids.join(','));
			this.getEvalueData(pdtids[0]);
			/* 为了方便测试，这里使用同一个订单数据 */
			//this.order = await this.$api('orderDetail')
		},
		methods:{
			//拔打电话
			freeTell(){
				wx.makePhoneCall({
					phoneNumber:this.order.ooutTradeNo[0].CoPhone 
				})
			},
			//地图导航
			viewShop() {
				let plugin = requirePlugin('routePlan');
				let key = 'B4SBZ-Q6HKQ-2VF5Z-GE2PK-ZNMV3-F7FF2'; //使用在腾讯位置服务申请的key
				let referer = '小镜界'; //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name':this.order.ooutTradeNo[0].CoName,
					'latitude': this.order.ooutTradeNo[0].CoLatitude,
					'longitude': this.order.ooutTradeNo[0].CoLongitude
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			//获取商品评价
			getEvalueData(pdtid){
				let that = this;
				let whe = [];
				whe.push({
					"name": "EvProductId",
					"value": pdtid,
					"displayType": "Contains"
				});
				
				
				let cateOp = {
					url: "api/Lx_Self_Evaluate/UI_GetPageData",
					data: {
						"page": 1,
						"rows": 100,
						"sort": 'Id',
						wheres: JSON.stringify(whe)
					}
				}
				
				this.$request.Post(cateOp, (ret) => {
					if (ret.rows.length > 0) {
						that.evaluateData.list=[];
						
						let evData = ret.rows;
						evData.forEach(e=>{
							let currImgs=[];
							e.lx_Self_EvaluateSub.forEach(sub=>{
								//图片地址相对路径转绝对路径
								let img=that.$request.setImgUrl(sub.sEvImg,'123');
								currImgs.push(img);
							});
							let currItem={
								header_img: e.evWxHeadImg,
								user_name: e.evWxName,
								rate:e.evScore,
								create_time: e.createDate.substring(0,10),
								content: e.evContent,
								imgs:currImgs
							}
							that.evaluateData.list.push(currItem);
							
						})
			
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #EAEAEA;
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
}


.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20rpx 0;

	.service-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rem !important;
		font-size: $font-size-sm;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}	
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	.order-box {
		z-index: 10;
		height: 25vh;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 0 0 20rpx 0 rgba($color: #333, $alpha: 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-color-white;
		flex-shrink: 0;
		
		.status-icon {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 30rpx;
		}
	}
}

.phone-icon, .map-icon {
	width: 64rpx;
	height: 64rpx;
}

.phone-icon {
	margin-right: 40rpx;
}

.border-dashed {
	border-bottom: 1rpx dashed $border-color;
}

.order-info {
	border-radius: 0 0 30rpx 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 30rpx;
}

.order-invoice {
	padding: 30rpx 40rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 60rpx;
	background-color: #F6F6F6;
}

.jump-icon {
	width: 24rpx;
	height: 48rpx;
	margin-left: 20rpx;
}
</style>
